<template>
    <div>
      <el-row type="flex" justify="center">
      <el-input v-model="numberString" size="mini"></el-input>
      <el-button type="primary" size="mini" @click="onSubmit">开始排序</el-button>
      </el-row>
    <transition-group name="flip-list" tag="p" style="height:600px" class="tr">
      <div class="normal" v-for="item in numberArray" :key="item.index" :style="{height: (item.value * 80 /max)+'%'}">
        <span class="value">{{item.value}}</span>
      </div>
    </transition-group>
    </div>
</template>
<script>
export default {
    name:'bubble',
    data(){
        return{
            numberString: '2,7,6,9,6,4,2',
            numbers: [],
            numberArray: [],
            currentIndex: 0,
            compareIndex: 1
        }
    },
  components: {
  },
  watch: {

  },
  computed: {
      max(){
          let max = 0
          this.numbers.forEach(element => {
              if(element > max){
                  max = element
              }
          });
          // console.log('max',max)
          return max
      }
  },
  created (){
  },
  mounted(){
  },
  methods:{
    getClass(index){
      return index === this.currentIndex ? '.current' : index === this.compareIndex ? '.compare' : 'normal'
    },
    onSubmit(){
        this.getNumberArray()
        this.bubbleSort()
    },
    getNumberArray(){
        this.numbers = this.numberString.split(',').map(x => parseInt(x)).filter(m => this.isRealNum(m))
        // console.log('numbers',this.numbers)
        this.numberArray = this.numbers.map( (item,index) => {return {index:index,value:item}})
        // console.log('numberArray',this.numberArray)
    },
    isRealNum(value){
      if(value === '' || value === null){
        return false
      }
      return !isNaN(value) && typeof value === 'number'
    },
    bubbleSort(){
      let len = this.numberArray.length
      let i = 0
      let j = 0
      // 内层循环
      let innerLoop = () => {
        // 每个内层循环都执行完毕后再执行下一个外层循环
        if (j >= (len - 1 - i)) {
          j = 0
          i++
          outLoop()
          return false
        }
        this.currentIndex = j
        this.compareIndex = j+1
        if (this.numberArray[j].value > this.numberArray[j + 1].value) {
          let tmp = this.numberArray[j]
          this.$set(this.numberArray, j, this.numberArray[j + 1])
          this.$set(this.numberArray, j + 1, tmp)
        }
        // 动画是500毫秒，所以每隔800毫秒执行下一个内层循环
        setTimeout(() => {
          j++
          innerLoop()
        }, 800)
      }
      // 外层循环
      let outLoop = () => {
        if (i >= len) {
          return false
        }
        innerLoop()
      }
      outLoop()
    }
  }
}
</script>
<style>
.value{
  color: rgb(0, 0, 0);
}
.normal{
  background-color: darkgrey;
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.current{
  background-color: rgb(247, 8, 8);
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.compare{
  background-color: rgb(233, 103, 17);
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.tr{
  text-align: center;
}
</style>
